<html>

<head>
  <title>三大浪漫WegGL示例程序</title>
  <style>
    * {
      padding : 0;
      margin : 0;
    }
    body {
      display : flex;
      flex-direction: row;
    }
    .left {
      width : 340px;
      border-right : 1px solid #eee;
    }
    ul {
      padding : 0;
    }
    ul li {

      font-size: 32px;
      line-height: 30px;
      height : 30px;
      padding : 10px;
      list-style: none;
      border-bottom : 1px solid #eee;
      cursor : pointer;
    }
    ul li:hover {
      color :aqua;

    }
    .right {
      flex : 1;
    }

    iframe {
      border : none;
      width:100%;
      height : 100%;
    }

  </style>
</head>

<body>
  <div class='left'>
    <ul>
      __MENU__
  </ul>
  </div>
  <div class='right'>
    <iframe id='iframe'></iframe>
  </div>
  <script>


    const iframe = document.getElementById('iframe');
    const items = document.getElementsByClassName('menu-item');
    for(let i = 0; i < items.length; i++) {
      const item = items[i];
      item.addEventListener('click', (e) => {
        const link = e.target.attributes['data-link'].value
        iframe.src = "/" + link;
      });
    }

  </script>
</body>

</html>